<template>
	<view>
		<!-- <movable-area>
			<movable-view class="max" direction="all">
				<treeVue :node="treeList"/>
			</movable-view>
		</movable-area> -->
		<view class="search">
			<input type="text" placeholder="请输入名字定位" placeholder-class="search-ac" v-model="params.shi_shu">
			<view class="search-img flex-center">
				<image src="/static/定位.png" mode="" @click="search"></image>
			</view>
			<view class="search-tx" @click="exportBatch">批量导出</view>
		</view>
		<u-gap :height="70"></u-gap>
		<scroll-view class="scroll-Y" scroll-x="true" ref="scrollView">


			<view class="layout">
				<view class="ranking">
					<RankingVue :tree="treeList" />
				</view>
				<view class="treeNode">
					<treeVue :node="treeList" ref="treeComponent" :level="0" :query="{genealogy_id: id}" />
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	const config = require('@/common/config.js')
	import {
		treeList
	} from './config.js'
	import {
		familyTreeHttp,
		genealogyGenerationListHttp,
		exportHttp,
		importHttp
	} from '@/common/http/api.js'
	import treeVue from './components/tree/tree.vue';
	import RankingVue from './ranking/ranking.vue';
	export default {
		components: {
			treeVue,
			RankingVue
		},
		data() {
			return {
				scrollIntoView: '',
				scrollIntoViewId: '',
				id: '',
				filePath: '',
				treeList: []
			};
		},
		onLoad(e) {
			this.id = e.id

		},
		onShow() {
			this.init()
		},
		computed: {
			// treeList() {
			// 	return this.$store.state.tree
			// }
		},
		methods: {

			async exportBatch() {
				exportHttp({genealogy_id: this.id}).then(res=>{
					
				})
			},
			handleTree(arr) {

			},
			init() {
				familyTreeHttp({
					id: this.id
				}).then(res => {
					//this.$store.commit('setTree', [res.data])
					this.treeList = res.data ? [res.data] : []
					// let tree = [{
					// 	id: 0,
					// 	label: '',
					// 	pid: 0,
					// 	child: []
					// }]
					// genealogyGenerationListHttp().then(d => {
					// 	if (Array.isArray(d.data) & d.data.length > 0) {
					// 		res.data.hang_bei = d.data[0].hang_bei
					// 	}
					// 	this.$store.commit('setTree', [res.data])
					// })

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.search {
		width: 686rpx;
		height: 78rpx;
		background: #D9CEBB;
		border-radius: 39rpx;
		position: fixed;
		top: 20rpx;
		left: 32rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 10rpx 0 30rpx;
		align-items: center;
		z-index: 999999999;

		input {
			min-width: 0;
			height: 100%;
			flex: 1;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
		}

		.search-ac {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
		}

		.search-img {
			width: 66rpx;
			height: 66rpx;
			background: rgba(246, 241, 231, 0.8);
			border-radius: 50%;
			margin-left: 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;

			}
		}

		.search-tx {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
			width: fit-content;
			position: absolute;
			right: 0;
			bottom: -60rpx;
		}

	}

	.max {
		width: 500vw;
		height: 100vh;
	}

	.dd {
		display: flex;
	}

	.layout {
		display: flex;
		width: fit-content;

		.ranking {
			width: 120rpx;

		}

		.treeNode {
			flex: 1;
		}
	}
</style>